*{
    box-sizing:border-box;
}
html{
    font-size: 26.67vw;
}
body {
    overflow: hidden;
}
.root {
	position:relative;
}
.img_1 {
	width:100%;
	position:absolute;
	right:-100%;
	animation:right 1s linear;
	animation-fill-mode:forwards;
	z-index:9997;
}
.img_1 img {
	width:100%;
}
.img_2{
	width:100%;
	position:absolute;
	left:-100%;
	animation:left 1s linear 2.1s;
	animation-fill-mode:forwards;
}
.img_2 img {
	width:100%;
}
.img_p {
	z-index:9998;
	position:absolute;
	opacity:0;
	animation:opac 1s linear 1.1s; 
	animation-fill-mode:forwards;
}
.img_p img {
	width:100%;
}
.img_p1 {
	position:absolute;
	opacity:0;
	animation:opac 1s linear 3.1s; 
	animation-fill-mode:forwards;
}
.img_p1 img {
	width:100%;
}
.p_s {
	position:absolute;
	top: 0.96rem;
    left: 0.47rem;
}
.p_s p{
	font-size:0.19rem;
	font-family:"zcool-gdh";
	font-weight:700;
}
.p_s_1 {
	position:absolute;
	top:4.3rem;
	left:1.67rem;
}
.p_s_1 p {
	font-size:0.19rem;
	font-family:"zcool-gdh";
	font-weight:700;
}
.img_4 {
	width:0.4rem;
	position:absolute;
	top: 0.1rem;
    right: 0.15rem;
	z-index:9999;
}

.img_4 img {
	width:100%;
}
.bottom_img {
	position:absolute;
	width:0.3rem;
	top:6.2rem;
    left: 1.75rem;
	opacity:0;
	animation:opac 2s linear 4.5s; 
	animation-fill-mode:forwards;
}
.bottom_img img {
	width:100%;
}
@keyframes right{
	0%{
		right:-100%;
	}
	100%{
		right:0;
	}
}
@keyframes left{
	0%{
		left:-100%;
	}
	100%{
		left:0;
	}
}
@keyframes opac{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
